<template>
  <div class="search-list">
    <div class="header">
      <Header></Header>

      <!-- 搜索历史 -->
      <ul>
        <li
          v-for="(item, index) in searchList.data"
          :key="index"
          @click="changeTab(index)"
        >
          <div :class="searchList.currentIndex == index ? 'active' : ''">
            {{ item.name }}
          </div>
          <div class="search-filter" v-if="index != 0">
            <i
              class="iconfont icon-arrowup"
              :class="item.status == 1 ? 'active' : ''"
            ></i>
            <i
              class="iconfont icon-arrow-down-filling"
              :class="item.status == 2 ? 'active' : ''"
            ></i>
          </div>
        </li>
      </ul>
    </div>
    <!-- 展示搜索内容 -->
    <section ref="wrapper">
      <div
        v-if="goods_list.length == 0"
        style="
          align-items: center;
          margin: 0.325rem 0 0 0.25rem;
          color: #999;
          font-size: 0.625rem;
        "
      >
        <strong>搜索不到相关内容...</strong>
      </div>
      <ul v-else>
        <li v-for="(item, index) in goods_list" :key="index">
          <!-- 图片懒加载 v-lazy -->
          <img v-lazy="item.imgUrl" alt="" @click="toDetail(item.id)" />
          <h3>{{ item.name }}</h3>
          <div class="pay">
            <div class="price">
              <span>￥</span>
              <span>{{ item.price }}</span>
            </div>
            <div class="buy">立即购买</div>
          </div>
        </li>
      </ul>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/search/Header.vue";
import Tabbar from "@/components/common/Tabbar.vue";
//引入插件
import BetterScroll from "better-scroll";
//引入封装的依赖
import http from "@/common/api/request.js";

export default {
  name: "SearchList",
  data() {
    return {
      goods_list: [],
      searchList: {
        currentIndex: 0,
        data: [
          /*
			  satuts:0 都不亮
			  satuts:1 上箭头量
			  satuts:22 下箭头亮
			  */
          { name: "综合", key: "zh" },
          { name: "价格", status: 0, key: "price" },
          { name: "销量", status: 0, key: "num" },
        ],
      },
    };
  },
  components: {
    Header,
    Tabbar,
  },
  computed: {
    orderBy() {
      //获知当前是哪一个对象
      let obj = this.searchList.data[this.searchList.currentIndex];
      //根据状态判断，是升序还是降序
      let val = obj.status == "1" ? "asc" : "desc";
      return {
        [obj.key]: val, //price:asc
      };
    },
  },
  created() {
    this.getData();
  },
  //  mounted() {
  //    this.initBs()

  //  },
  methods: {
    //请求后台商品详情信息
    toDetail(id) {
      console.log("toDetail");
      this.$router.push({
        name: "Detail",
        query: { id },
      });
    },
    //请求数据
    getData() {
      http
        .$axios({
          url: "/api/goods/shopList",
          params: {
            searchName: this.$route.query.key,
            ...this.orderBy,
          },
        })
        .then((res) => {
          this.goods_list = res;

          //保证DOM渲染完毕后在执行
          this.$nextTick(() => {
            this.initBs();
          });
        });
    },

    //
    changeTab(index) {
      // 获取当前点击的对象
      this.searchList.currentIndex = index;
      //点击的下标对应数据的哪一个
      let item = this.searchList.data[index];
      //q取消所有的状态值 ===都变成0
      console.log(item);
      this.searchList.data.forEach((v, i) => {
        // console.log(v,i)
        if (i != index) {
          v.status = 0;
        }
        //当前点击的状态改变
        if (index == this.searchList.currentIndex) {
          item.status = item.status == 1 ? 2 : 1;
        }
      });

      //发送请求进行数据排序
      this.getData();
    },
    //滚动
    initBs() {
      let wrapper = this.$refs.wrapper;
      new BetterScroll(wrapper, {
        click: true,
        movale: true,
        zoom: true,
        observeDOM: true, //解决刷新后依然有滚动效果
      });
    },
  },
  watch: {
    //路由变化时，请求数据
    $route() {
      this.getData();
    },
  },
};
</script>

<style scoped lang="less">
.search-list {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;

  .header {
    ul {
      display: flex;
      justify-content: space-around;
      padding: 0.2rem;
      font-size: 0.4rem;
      background-color: #fff;

      li {
        display: flex;
        justify-content: center;
        // align-items: center;

        .search-filter {
          display: flex;
          flex-direction: column;

          width: 0.25rem;
          height: 0.25rem;
          padding: 0.0125rem 0 0 0.0625rem;

          i {
            width: 100%;
            height: 100%;
            font-size: 0.125rem;
          }
        }
        .active {
          color: #b0352f;
        }
      }
    }
  }

  section {
    flex: 1;
    overflow: hidden;
    background-color: #fff;
    font-size: 0.3125rem;

    ul {
      display: flex;
      flex-wrap: wrap;
      // justify-content: space-around;
      // align-items: center;

      li {
        width: 50%;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        align-items: center;
        margin-bottom: 0.5rem;

        img {
          width: 4.8rem;
          height: 4.8rem;
        }
        img[lazy="loading"] {
          background-color: #f7f7f7;
        }
        h3 {
          width: 93%;
          padding: 0.3125rem;
          //超出隐藏
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .pay {
          width: 90%;
          display: flex;
          justify-content: space-between;

          span {
            // font-weight: 250;
            font-size: 0.4rem;
            color: #b0352f;
          }
          .buy {
            background-color: #b0352f;
            color: #fff;
            text-align: center;
            line-height: 0.5rem;
            font-size: 0.4rem;
            padding: 0.12rem 0.1875rem;
            border-radius: 8px;
          }
        }
      }
    }
  }
}
</style>
